<!DOCTYPE html>
<html>
	<head>
		<title>Rule Evaluator</title>
		<script type="text/javascript" src="../js-lib/jquery/core/jquery-1.6.2.js"></script>
		<script type="text/javascript" src="plugin/rule-evaluator-plugin.js"></script>
		
		<link rel="stylesheet" type="text/css" href="style/style.css" />
	</head>
	<body>
		<table class="input-form">
			<tr class="input-row evaluateElement" data-evaluation-rule="">
				<td class="input-label inputBorder">Show Form:</td>
				<td class="input-field inputBorder">
					<input type="radio" name="attribute0" value="true"/><span class="text">Yes</span>
					<input type="radio" name="attribute0" value="false"/><span class="text">No</span>
				</td>
				<td class="text">Show form by selecting Yes</td>
			</tr>
			<tr class="input-row evaluateElement" data-evaluation-rule="attribute0">
				<td class="input-label inputBorder">String Attribute:</td>
				<td class="input-field inputBorder">
					<input type="text" name="attribute1" value=""/>
				</td>
				<td class="text">Enable Integer Attribute by entering 'hi'</td>
			</tr>
			<tr class="input-row evaluateElement" data-evaluation-rule="attribute1 == 'hi'">
				<td class="input-label inputBorder">Integer Attribute:</td>
				<td class="input-field inputBorder">
					<input type="text" name="attribute2" value=""/>
				</td>
				<td class="text">Enable Text Attribute by entering 666 for this field OR by using a combo of entering a value &lt; 100 but &gt; 10 for this field and a value of 123456 for BigInteger Attribute</td>
			</tr>
			<tr class="input-row evaluateElement" data-evaluation-rule="attribute0">
				<td class="input-label inputBorder">BigInteger Attribute:</td>
				<td class="input-field inputBorder">
					<input type="text" name="attribute3" value=""/>
				</td>
				<td class="text"></td>
			</tr>
			<tr class="input-row evaluateElement" data-evaluation-rule="attribute2 == parseInt(666) or (( ( attribute2 <= parseInt(100) and attribute2 > parseInt(10) ) and attribute3 >= parseInt(123456) ))">
				<td class="input-label inputBorder">Text Attribute:</td>
				<td class="input-field inputBorder">
					<input type="text" name="attribute4" value=""/>
				</td>
				<td class="text">Enable Text Area Attribute by entering 'This is text attribute'. </td>
			</tr>
			<tr class="input-row evaluateElement" data-evaluation-rule="attribute0 && ( attribute4 == ^This is text attribute$ )">
				<td class="input-label inputBorder">Text Area Attribute:</td>
				<td class="input-field inputBorder">
					<textarea class="textArea" name="attribute5"></textarea>
				</td>
				<td class="text">Enable Select Attribute by entering 'hello world!!!'</td>
			</tr>
			<tr class="input-row evaluateElement" data-evaluation-rule="attribute0 && ( attribute5 == ^hello world!!!$ )">
				<td class="input-label inputBorder">Select Attribute:</td>
				<td class="input-field inputBorder">
					<select name="attribute6">
						<option value="">--- Select One ---</option>
						<option value="option1">Option 1</option>
						<option value="option2">Option 2</option>
						<option value="option3">Option 3</option>
					</select>
				</td>
				<td class="text">Show label by selecting 'Option 2'</td>
			</tr>
			<tr class="input-row evaluateElement" data-evaluation-rule="attribute0 && ( attribute6 == ^option2$ )">
				<td class="inputBorder text" colspan="2">Aaawwww!!! So much to see me...</td>
			</tr>
			<tr class="input-row evaluateElement" data-evaluation-rule="attribute0 == false">
				<td class="inputBorder text" colspan="2">The form is hidden and the fields are disabled.</td>
			</tr>
		</table>
	</body>
	
	<script type="text/javascript">
		$( document ).ready(function() {
			rule_evaluator.initialize();
		});
	</script>
</html>
